<template>
	<view style="height: 100%">
		<view v-if="activityDetail.userStatus == 1">
			<view v-if="activityDetail.status == 2" class="pay-award">
				<view class="demarcation">
					<image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/hd_tit.png">
					</image>
				</view>
				<view class="hd_box">
					<!-- 活动 -->
					<view class="activity-container">
						<view class="title">{{ activityDetail.name }}</view>
						<view class="line-container">
							<view class="left-circle"></view>
							<view class="dotted-line"></view>
							<view class="right-circle"></view>
						</view>

						<view class="head-list">
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<u-icon name="calendar" color="#606266" size="40"></u-icon>
									<view class="item-title">活动期限</view>
								</view>
								<view class="head-list__right">
									<text>{{ activityDetail.startTime }}</text>
									<text v-if="activityDetail.alwaysValidStatus == 1">~{{ activityDetail.endTime }}</text>
									<text v-if="activityDetail.alwaysValidStatus == 2">~长期有效</text>
								</view>
							</view>
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<u-icon name="map" color="#606266" size="40"></u-icon>
									<view class="item-title">活动城市</view>
								</view>
								<view class="head-list__right">{{activityDetail.activityCity==0?'所有城市':'部分城市'}}</view>
							</view>
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<u-icon name="clock" color="#606266" size="36"></u-icon>
									<view class="item-title">活动时段</view>
								</view>
								<view class="head-list__right" v-if="activityDetail.limitTimeStatus == 1">全天</view>
								<view class="head-list__right" v-if="activityDetail.limitTimeStatus == 2">
									{{ activityDetail.limitTime }}
								</view>
							</view>
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<u-icon name="account" color="#606266" size="40"></u-icon>
									<view class="item-title">适用用户</view>
								</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 1">所有用户</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 2">所有个人用户</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 3">指定个人用户</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 4">所有车队用户</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 5">指定车队用户</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pay-award__box">
					<view class="box-head flex-row-start">
						<view class="box-head__title">奖励阶梯</view>
					</view>
					<view class="box-center" v-for="(item,index) in list" :key="index">
						<view class="center-row1">充值等级{{index+1}}</view>
						<view class="center-row2">
							<view style="margin-right: 100rpx;">充值金额{{item.rechargeQuota}}元</view>
							<view>奖励次数{{item.rewardNumber}}次</view>
						</view>
						<view class="card_wrap flex-row-start flex_wrap">
							<view class="card_item flex-column-start" v-if="item.serviceFeeDetail">
								<image class="bg"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png">
								</image>
								<view class="title">{{item.serviceFeeDetail[0].giveCount}}次</view>
								<view class="btn flex-row-center">
									<image class="btn_frame"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
									</image>
									<view style="font-size: 26rpx;">免服务费</view>
								</view>
							</view>
							<view class="card_item flex-column-start" v-if="item.bonusDetailList">
								<image class="bg"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png">
								</image>
								<view class="title">{{item.bonusDetailList[0].bonusAmount}}元</view>
								<view class="btn flex-row-center">
									<image class="btn_frame"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
									</image>
									<view style="font-size: 26rpx;">奖励金额</view>
								</view>
							</view>
							<view class="card_item flex-column-start" v-if="item.integralDetailList">
								<image class="bg"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png">
								</image>
								<view class="title" style="padding-top:20rpx">{{item.integralDetailList[0].giveIntegral}}分</view>
								<view class="btn flex-row-center">
									<image class="btn_frame"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
									</image>
									<view style="font-size: 26rpx;">积分</view>
								</view>
							</view>
						</view>
						<view class="box-discounts__tickets flex-row-start">
							<template v-if="item.couponDetailList">
								<view class="tickets-item flex-column-start"
									v-for="(item1, index1) in item.couponDetailList[0].marketCouponVoList" :key="index1">
									<image class="tickets-item__bg"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/hongbao_bg.png">
									</image>
									<view class="tickets-item__title flex-row-center">{{item1.couponTypeStr}}</view>
									<view class="tickets-item__num">
										<text>￥</text>
										{{item1.couponQuota}}<text class="tickets-item__count" v-if="item1.rewardNumber!=1">x{{item1.rewardNumber}}</text>
									</view>
									<view class="tickets-item__desc">满{{item1.couponNotApplyCause}}可用</view>
								</view>
							</template>
							<template v-if="item.cardDetailList">
								<view class="tickets-item ka flex-column-start"
									v-for="(item1, index1) in item.cardDetailList[0].marketCardVoList" :key="index1">
									<image class="tickets-item__bg"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/hongbao_bg.png">
									</image>
									<view class="tickets-item__title flex-row-center">{{item1.cardTypeStr}}</view>
									<view class="tickets-item__num">
										<text v-if="item1.cardTypeStr=='金额卡'">￥</text>
										{{item1.cardQuota}}
										<text>{{item1.cardTypeStr=='电量卡'?'度':item1.cardTypeStr=='折扣卡'?'折':item1.cardTypeStr=='次数卡'?'次':''}}</text>
										<text class="tickets-item__count" v-if="item1.rewardNumber!=1">x{{item1.rewardNumber}}</text>
									</view>
									<view class="tickets-item__desc">{{item1.cardTypeStr=='电量卡'?'':item1.cardNotApplyCause}}</view>
								</view>
							</template>
						</view>
					</view>
				</view>
				<view class="pay-award__box">
					<view class="box-head flex-row-start">
						<view class="box-head__title">活动说明</view>
					</view>
					<view class="box-describe">
						{{ activityDetail.explainText }}
					</view>
				</view>
			</view>

			<view v-if="activityDetail.status == 1">
				<Upgrading imgType="s1" text="活动开始时间 " :textTime="activityDetail.startTime" text2="敬请期待!"></Upgrading>
			</view>

			<view v-if="activityDetail.status == 3">
				<Upgrading imgType="s3" text="哎呀，活动结束了~"></Upgrading>
			</view>

			<view v-if="activityDetail.status == 4">
				<Upgrading imgType="s3" text="哎呀，活动已停止~"></Upgrading>
			</view>
		</view>

		<view v-if="activityDetail.userStatus == 2">
			<Upgrading imgType="u0" text="抱歉，您不是受邀用户，暂时无法参加此活动哦!"></Upgrading>
		</view>
	</view>
</template>

<script lang="ts">
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	// import customNav from '@/components/custom-nav/index';
	import Upgrading from '@/marketing_page/components/upgrading/upgrading';
	// marketing/pages/pay/payAward/payAward.ts
	import { getRechargeRewardsDetail } from '@/api/marketing/rechargeApi';
	const app = getApp();
	export default {
		components: {
			// customNav,
			Upgrading
		},
		data() {
			return {
				HD: '',

				activityDetail: {
					userStatus: 0,
					status: 0,
					name: '',
					startTime: '',
					alwaysValidStatus: 0,
					endTime: '',
					limitTimeStatus: 0,
					limitTime: '',
					applyUserStatus: 0,
					explainText: ''
				},
				list: [],
				navHeight: app.globalData.statusBarHeight + app.globalData.navBarHeight,


			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options : any) {
			console.log(options);
			this.setData({
				HD: options.HD
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() { },
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			console.log(this.HD, 'cccccccccc');
			this.getHdDetail();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() { },
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() { },
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() { },
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() { },
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() { },
		methods: {
			//获取站充值奖励活动详情
			getHdDetail() {
				//获取充值活动详情
				getRechargeRewardsDetail({
					id: this.HD,
					plUserId: uni.getStorageSync('memberId')
				})
					.then((res : any) => {
						console.log(res.data, 'ccccccccc');
						if (res.code == 200) {
							// status	活动状态1 => 未开始, 2 => 进行中, 3 => 已结束, 4 => 已停止
							this.setData({
								activityDetail: res.data.activityDetail,
								list: res.data.marketActivityRechargeVo
							});
						} else {
							console.log('返回不是200了');
						}
					})
					.catch((err) => {
						console.log(err);
					});
			}
		}
	};
</script>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";


	.pay-award {
		.head-list {
			margin-top: 20rpx;

			&__left {
				width: 200rpx;
			}

			&__right {
				font-size: 28rpx;
				color: #303133;
			}

			&__item {
				margin-bottom: 38rpx;
				align-items: flex-start !important;

				.item-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 13rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #606266;
					width: 200rpx;
				}
			}
		}

		&__box {
			background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
			border: 2rpx solid #FFFFFF;
			box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.2400);
			border-radius: 16rpx;
			margin: 0 24rpx;
			padding: 0 32rpx;
			margin-bottom: 16rpx;

			.box-head {
				height: 100rpx;

				&__title {
					font-size: 30rpx;
					font-weight: bold;
					color: #303133;
					margin-right: 33rpx;
				}

				&__desc {
					font-size: 22rpx;
					color: #909399;
				}
			}

			.box-center {
				border-top: 1px solid #DCDFE6;

				.center-row1 {
					margin: 10rpx 0;
				}

				.center-row2 {
					display: flex;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
			}

			.card_wrap {
				padding-bottom: 32rpx;

				.card_item {
					position: relative;
					width: 202rpx;
					height: 192rpx;
					z-index: 1;
					margin-right: 15rpx;
					margin-bottom: 24rpx;
					line-height: 1;
					padding-top: 30rpx;
					box-sizing: border-box;

					&:nth-child(3),
					&:nth-child(6),
					&:nth-child(9),
					&:nth-child(12),
					&:nth-child(15) {
						margin-right: 0;
					}

					.desc {
						font-size: 22rpx;
						color: #A27344;
						margin-bottom: 16rpx;
					}

					.bg {
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: -1;
					}

					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #FC724C;
						margin-bottom: 20rpx;
					}

					.btn {
						position: relative;
						width: 182rpx;
						height: 65rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #A14B20;

						.btn_frame {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							z-index: -1;
						}
					}
				}
			}

			.link-img {
				width: 695rpx;
				height: 25rpx;
				margin: 32rpx -32rpx;
			}

			.box-discounts {

				.hig {
					font-weight: bold;
					color: #AE865C;
				}

				&__head {
					position: relative;
					height: 101rpx;
					z-index: 1;
					padding: 0 32rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #606266;


					.head-bg {
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: -1;
						left: 0;
						top: 0;
					}
				}

				&__tickets {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					align-items: center;
					flex-wrap: wrap;

					.tickets-item {
						width: 180rpx;
						height: 180rpx;
						color: #fc724c;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						background-position: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
						position: relative;
						margin-right: 42rpx;
						margin-bottom: 25rpx;
						z-index: 1;
						&__count{
							font-size: 22rpx;
						}

						&:nth-child(3n) {
							margin-right: 0;
						}
						&.ka{
							.tickets-item__num{
								padding-bottom: 10rpx;
							}
						}

						&__bg {
							position: absolute;
							width: 100%;
							height: 100%;
							z-index: -1;
						}

						&__title {
							color: #A26D35;
							padding-top: 0rpx;
							margin-bottom: 20rpx;
							font-size: 25rpx;
						}

						&__num {
							text {
								// font-size: 22rpx;
							}

							font-weight: bold;
							color: #F0703E;
							margin-bottom:25rpx;
						}

						&__desc {
							font-size: 18rpx;
							color: #FAD9B1;
						}
					}
				}

			}

			.box-describe {
				padding: 20rpx 0;
				font-size: 26rpx;
				color: #303133;
				word-wrap: break-word;
			}
		}
	}




	.demarcation {
		margin: 0 auto;
		height: 70rpx;
		margin-top: 20rpx;

		.img {
			width: 99%;
			height: 100%;
			margin-left: 8rpx;
		}
	}

	.hd_box {
		border: 2rpx solid #FFFFFF;
		box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
		margin: 0 24rpx 20rpx;
		border-radius: 0 0 16rpx 16rpx;

		.activity-container {
			background: #fcfbfc;
			border: 2rpx solid #fcfbfc;
			border-radius: 0 0 16rpx 16rpx;
			padding: 0 32rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #303133;
				margin: 0 auto;
			}

			.line-container {
				display: flex;

				.dotted-line {
					width: 100%;
					border-bottom: 0.5rpx solid #DCDFE6;
					margin: 20rpx auto;
				}

				.left-circle {
					width: 18rpx;
					height: 36rpx;
					border-radius: 0 18rpx 18rpx 0;
					line-height: 36rpx;
					background-color: #F5F7FA;
					position: absolute;
					left: 25rpx;
				}

				.right-circle {
					width: 18rpx;
					height: 36rpx;
					border-radius: 18rpx 0 0 18rpx;
					line-height: 36rpx;
					background-color: #F5F7FA;
					position: absolute;
					right: 25rpx;
				}
			}

		}
	}


	// 奖励方式遮罩
	.zhezhao {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(23, 20, 16, 0.7);
		border-radius: 16rpx;

		.zhezhao_container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #F5F7FA;

		}
	}
</style>